import Statement from '../index'
import './index.less'
import { Form, DatePicker, Table } from 'antd';
import type { DatePickerProps } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { useEffect, useState } from 'react';
import { getDebt } from '@/services/statement';
// import { cashUrl } from '../../../../services/statement/index'
interface DataType {
    fsId: number
    fsName: string,
    fsRowNum: number,
    oneAmount: number,
    twoAmount: number
}
interface FixedDataType {
    key: React.Key;
    name: string;
    description: string;
}
const fixedColumns: ColumnsType<FixedDataType> = [
    {
        title: 'Name',
        dataIndex: 'name',
        fixed: true,
        width: 100,
    },
    {
        title: 'Description',
        dataIndex: 'description',
    },
];
const columns: ColumnsType<DataType> = [
    {
        title: '项目',
        dataIndex: 'fsName',
        render: (text, record) => {
            let style = {}
            if (record.fsName == '一、营业收入' || record.fsName == '二、营业利润（亏损以“-”号填列）') {
                style = { fontWeight: 'bold' }
            }
            return (
                <div>
                    <span style={style}>{text}</span>
                </div>
            )
        }
    },
    {
        title: '行次',
        dataIndex: 'fsRowNum',
    },
    {
        title: '本年累计金额',
        dataIndex: 'oneAmount',
    },
    {
        title: '本期金额',
        dataIndex: 'twoAmount',
    },
];
function CashFlow() {
    const [data, setData] = useState([]);
    useEffect(() => {
        getCash(null, 3)
    }, [])
    const getCash = async (a: any, b: any) => {
        let { data } = await getDebt('2023-10',3);
        console.log(data);
        
        let _data = data.map((v: any) => {
            return {...v,key:v.fsId}
        })
        setData(_data);
    }
    const onChange: DatePickerProps['onChange'] = (date, dateString) => {
        console.log(date, dateString);
    };
    return (
        <div className='finall'>
            <Statement header='现金流量表'></Statement>
            <div className='center'>
                <Form name="customized_form_controls">
                    <Form.Item
                        label="记账时间："
                        name="date"
                        style={{ marginLeft: '60px' }}
                    >
                        <DatePicker onChange={onChange} />
                    </Form.Item>
                </Form>
                <Form>
                    <button style={{ width: '80px', height: '40px', marginRight: 20, border: 'none', background: '#22AB82', color: 'white' }}>导出</button>
                    <button style={{ width: '80px', height: '40px', border: 'none', background: '#22AB82', color: 'white' }}>打印</button>
                </Form>
            </div>
            <Table
                columns={columns}
                dataSource={data}
                pagination={false}
                bordered
                style={{ marginLeft: '60px' }}
                scroll={{ y: 400 }}
            />
        </div>
    )
}
export default CashFlow